<template>
  <div>
    type
    <hr />
    <ButtonGroup>
      <Button type="info" @click="add">新增</Button>
      <Button type="warning">修改</Button>
      <Button type="error">删除</Button>
    </ButtonGroup>
    <hr />
    <div style="margin:10px 0;">
      类名
      <Input v-model="obj.name" style="width: 300px" />
    </div>
    <div style="margin-bottom:10px;">
      类别
      <Input v-model="obj.type" style="width: 300px" />
    </div>
    <hr />
    <Table :columns="col" :data="list"></Table>
  </div>
</template>

<script>
import { ApiUrl } from "@/utils/url.js";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("type");
export default {
  data() {
    return {
      list: [],
      col: [{ title: "类名", key: "name" }, { title: "类别", key: "type" }],
      obj: {}
    };
  },
  methods: {
    add() {
      this.$axios
        .post(ApiUrl, this.obj)
        .then(() => {
          this.getData();
          this.obj = {};
        })
        .catch(e => {
          console.log(e);
        });
    },
    getData() {
      this.$axios
        .get(ApiUrl, { transform: 1 })
        .then(res => {
          this.list = res.classify;
        })
        .catch(e => {
          console.log(e);
        });
    }
  },
  mounted() {
    this.getData();
  }
  //   data() {
  //     return {
  //       col: [{ title: "类名", key: "name" }, { title: "类别", key: "type" }],
  //       obj: {}
  //     };
  //   },
  //   computed: {
  //     ...mapState(["list"])
  //   },
  //   methods: {
  //     ...mapActions(["get", "save"]),
  //     add() {
  //       this.save(this.obj).then(res => {
  //         this.obj = {};
  //         this.get();
  //       });
  //     }
  //   },
  //   mounted() {
  //     this.get();
  //   }
};
</script>

<style>
</style>
